<template>
  <div>
    <img :src="imgPath" :style="imgCss">
    用户名:<input type="text" v-model="userObj.userName"/><br>
    密码:<input type="password" v-model="userObj.pwd"/><br>
    <input type="button" value="登录" @click="land()">
    <input type="button" value="确认" @click="ok">
    <input type="button" value="改变样式" @click="changeCss">
    <hr>
    单价：{{ price }}<br>
    数量：<input type="text" v-model="num"><br>
    总价：{{ price * num }}
    <hr>
    {{ age >= 18 ? "成年" : "小娃" }}
    <hr>
    性别：<input type="radio" value="man" v-model="sex">男
    <input type="radio" value="woman" v-model="sex">女
    {{ sex }}
    <hr>
    <select v-model="edu">
      <option value="本科">本科</option>
      <option value="专科">专科</option>
      <option value="高中">高中</option>
    </select>
    {{ edu }}
    <input type="button" @click="changeItem" value="改变选项">
    <hr>
    复选框
    <input type="checkbox" value="体育" v-model="likeArray">体育
    <input type="checkbox" value="语文" v-model="likeArray">语文
    <input type="checkbox" value="数学" v-model="likeArray">数学
    <input type="checkbox" value="英语" v-model="likeArray">英语
    <input type="checkbox" value="生物" v-model="likeArray">生物
    <input type="checkbox" value="化学" v-model="likeArray">化学
    <input type="checkbox" value="物理" v-model="likeArray">物理
    <input type="checkbox" value="政治" v-model="likeArray">政治
    {{ likeArray }}
    <hr>
    工资：<input type="text" ref="money"><br>
    <input type="button" value="获取值" @click="showValue">
    <hr>
    成绩：{{ grade }}<br>
    是否合格：
    <span v-if="grade >=60">合格</span>
    <span v-else>不合格</span><br>
    等级：
    <span v-if="grade >=90">优秀</span>
    <span v-else-if="grade >=80">良好</span>
    <span v-else-if="grade >=60">中等</span>
    <span v-else>差</span>

    <hr>
    <table border="1" cellspacing="0" width="80%">
      <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>工资</th>
        <th>状态</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="em in emList" :key="em.id">
        <td>{{ em.id }}</td>
        <td>{{ em.name }}</td>
        <td>{{ em.money }}</td>
        <td>{{ em.status }}</td>
        <td><input type="button" v-if="em.status=='在职'" value="离职"></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userObj: {},
      //给img加样式
      imgCss: {width: '300px', height: '300px', border: '1px solid red'},
      //img路径
      imgPath: require("./assets/logo.png"),
      price: 30,
      num: 1,
      age: 15,
      sex: "",
      edu: "",
      likeArray: [],
      grade: 55,
      emList: [
        {id: 1, name: "张三", money: "8000", status: "在职"},
        {id: 1, name: "张四", money: "400", status: "在职"},
        {id: 1, name: "张wu", money: "1500", status: "离职"},
        {id: 1, name: "张liu", money: "3500", status: "在职"}
      ]
    }
  },
  methods: {
    land() {
      if (this.userObj.userName == "java" && this.userObj.pwd == "123") {
        alert("登录成功")
        this.userObj = {}
        //经路由跳转首页
        // this.$router.push("/index")

        //经路由跳转首页，并传递参数
        //name表示注册的路由名称，params描述传递参数
        this.$router.push({name:"Index",params:{id:2,name:"tom"}});
      } else {
        alert("登陆失败")
      }
    },
    ok() {
      alert("确认")
    },
    changeCss() {
      //点击改变img样式
      this.imgCss.width = "100px";
      this.imgCss.height = "100px";
    },
    changeItem() {
      this.edu = "本科"
    },
    showValue() {
      alert(this.$refs.money.value)
      this.$refs.money.style.color = "red"
    }
  }
}
</script>

<style scoped>

</style>